<!DOCTYPE html>
<html>
<head>
	<title>opacity透明度动画</title>
	<meta charset="utf-8">
	<style type="text/css">
	*{margin: 0;padding: 0;}
	#div1{
		width: 200px;
		height: 200px;
		margin:20px 0 0 20px;
		background: red;
		filter: alpha(opacity:30);//兼容ie
		opacity: 0.3;
	}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oDiv=document.getElementById('div1');
			oDiv.onmouseover=function(){
				startMove(100);
			}
			oDiv.onmouseout=function(){
				startMove(30);
			}
		}

		var timer=null;
		var alpha=30;
		function startMove(iTarget){
			var oDiv=document.getElementById('div1');
			clearInterval(timer);
			timer=setInterval(function(){
				var speed=0;
				if (alpha<iTarget) {
					speed=10;
				}else{
					speed=-10;
				}
				if (alpha==iTarget) {
					clearInterval(timer);
				}
				else{
					alpha+=speed;
					oDiv.style.filter='alpha(opacity:'+alpha+')';
					oDiv.style.opacity=alpha/100;
				}

			},30)
		}
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>